<template>
  <div ref="dom" class="charts chart-china"></div>
</template>

<script>
import echarts from "echarts"
import echartsGL from "echarts-gl"
import tdTheme from "../theme.json"
import { on, off } from "@/libs/tools"
import "../../../../node_modules/echarts/map/js/china.js"
import "../../../../node_modules/echarts/map/js/province/anhui.js"
import "../../../../node_modules/echarts/map/js/province/aomen.js"
import "../../../../node_modules/echarts/map/js/province/beijing.js"
import "../../../../node_modules/echarts/map/js/province/chongqing.js"
import "../../../../node_modules/echarts/map/js/province/fujian.js"
import "../../../../node_modules/echarts/map/js/province/gansu.js"
import "../../../../node_modules/echarts/map/js/province/guangdong.js"
import "../../../../node_modules/echarts/map/js/province/guangxi.js"
import "../../../../node_modules/echarts/map/js/province/guizhou.js"
import "../../../../node_modules/echarts/map/js/province/hainan.js"
import "../../../../node_modules/echarts/map/js/province/hebei.js"
import "../../../../node_modules/echarts/map/js/province/heilongjiang.js"
import "../../../../node_modules/echarts/map/js/province/henan.js"
import "../../../../node_modules/echarts/map/js/province/hubei.js"
import "../../../../node_modules/echarts/map/js/province/hunan.js"
import "../../../../node_modules/echarts/map/js/province/jiangsu.js"
import "../../../../node_modules/echarts/map/js/province/jiangxi.js"
import "../../../../node_modules/echarts/map/js/province/jilin.js"
import "../../../../node_modules/echarts/map/js/province/liaoning.js"
import "../../../../node_modules/echarts/map/js/province/neimenggu.js"
import "../../../../node_modules/echarts/map/js/province/ningxia.js"
import "../../../../node_modules/echarts/map/js/province/qinghai.js"
import "../../../../node_modules/echarts/map/js/province/shandong.js"
import "../../../../node_modules/echarts/map/js/province/shanghai.js"
import "../../../../node_modules/echarts/map/js/province/shanxi.js"
import "../../../../node_modules/echarts/map/js/province/shanxi1.js"
import "../../../../node_modules/echarts/map/js/province/sichuan.js"
import "../../../../node_modules/echarts/map/js/province/taiwan.js"
import "../../../../node_modules/echarts/map/js/province/tianjin.js"
import "../../../../node_modules/echarts/map/js/province/xianggang.js"
import "../../../../node_modules/echarts/map/js/province/xinjiang.js"
import "../../../../node_modules/echarts/map/js/province/xizang.js"
import "../../../../node_modules/echarts/map/js/province/yunnan.js"
import "../../../../node_modules/echarts/map/js/province/zhejiang.js"
// import { Coordinates, CityCP } from '../city.js'
// import _cloneDeep from 'clone-deep'
echarts.registerTheme("tdTheme", tdTheme)

export default {
  name: "china-map",

  props: {
    value: Array
  },

  data() {
    return {
      dom: null,
      option: null,
      Chart: null
    }
  },

  watch: {
    value: {
      // handler(val, oldVal) {
      //   this.value = val
      //   this.initChina('china', 100)
      // }
    }
  },

  mounted() {
    this.Chart = echarts.getInstanceByDom(this.$refs.dom)
    this.$nextTick(() => {
      this.initChina('china', 110)
    })
  },

  methods: {
    resize() {
      echarts.getInstanceByDom(this.$refs.dom).resize()
    },

    initChina(val, number) {
      if (!this.$refs.dom) {
        return false
      }
      var that = this
      this.option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: true
        },
        series: [
          {
            type: "map3D",
            name: val,
            selectedMode: "single", //地图高亮单选
            // boxDepth: 0, //地图倾斜度
            regionHeight: 2, //地图高度
            map: val,
            // roam:true,
            viewControl:{
              center: [5, 0, 5],
              distance: number,
              alpha: 55,
              beta: 0
              // rotateSensitivity:0,//禁止旋转
              // zoomSensitivity:0,//禁止缩放
            },
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
                backgroundColor: "rgba(0,23,11,0)"
              }
            },
            itemStyle: {
              color:"#193969",//地图颜色
              borderWidth: 1,//分界线wdith
              borderColor: "#30c78b",//分界线颜色
            },
            data: this.value
          }
        ]
      }
      // this.Chart = echarts.getInstanceByDom(this.$refs.dom)
      if (!this.Chart) {
        this.Chart = echarts.init(this.$refs.dom)
      } else {
        this.Chart.clear()
      }
      this.Chart.setOption(this.option)
      this.Chart.on("click", function(params) {
        if (params.seriesName === 'china') {
          // that.$emit('change-map', params.name)
          that.Chart.clear()
          that.initProvince(params.name, 180)
        } else {
          return false
        }
      })
      on(window, "resize", this.resize)
    },
    initProvince(val, number) {
      this.option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: true
        },
        series: [
          {
            type: "map3D",
            name: val,
            selectedMode: "single", //地图高亮单选
            // boxDepth: 90, //地图倾斜度
            regionHeight: 3, //地图高度
            map: val,
            roam:true,
            viewControl:{
              center: [5, 0, 5],
              distance: number,
              alpha: 55,
              beta: 0
              // rotateSensitivity:0,//禁止旋转
              // zoomSensitivity:0,//禁止缩放
            },
            // light: {
            //   main: {
            //     intensity: 1,
            //     shadow: true,
            //     alpha: 150,
            //     beta: 70
            //   }
            // },
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
                backgroundColor: "rgba(0,23,11,0)"
              }
            },
            itemStyle: {
              color:"#193969",//地图颜色
              borderWidth: 1,//分界线wdith
              borderColor: "#30c78b",//分界线颜色
            }
          }
        ]
      }
      this.Chart.setOption(this.option)
    }
  },

  beforeDestroy() {
    console.log('销毁实例')
    let dcharts = echarts.getInstanceByDom(this.$refs.dom)
    if (dcharts) {
      echarts.dispose(dcharts)
    }
    // this.dom = null
    off(window, "resize", this.resize)
  }
}
</script>

<style lang="less" scoped>
.chart-china {
  background-image: "url(../../../assets/images/BG.png)"
}
</style>
